<!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-spring4-4.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<html >
<head>
    <meta charset="UTF-8">
    <title>Topic - Online Judge</title>
    <link rel="stylesheet" th:href="@{/css/styles.css}" >
    <link rel="stylesheet" th:href="@{/js/editormd/css/editormd.css}" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <script th:src="@{/js/jquery-1.7.2.js}"></script>
    <script th:src="@{/js/gdoj.js}"></script>
    <script th:src="@{/js/messager.js}"></script>
    <link href="css/jquery-ui.css" rel="stylesheet" type="text/css"/>
    <style>
        .ui-autocomplete-loading { background: white url('img/ui-anim_basic_16x16.gif') right center no-repeat; }
        .ui-autocomplete {
            max-height: 200px;
            overflow-y: auto;
            /* prevent horizontal scrollbar */
            overflow-x: hidden;
            /* add padding to account for vertical scrollbar */
            padding-right: 3px;

            font-size:11px;
            line-height: 12px;
        }
        /* IE 6 doesn't support max-height
         * we use height instead, but this forces the menu to always be this tall
         */
        * html .ui-autocomplete {
            height: 200px;
        }
    </style>
</head>
<body style="background-color: rgb(247, 248, 250);">
<div th:replace="common::web-navbar"></div>
<div class="container">
    <div class="content-topic content-edit-topic">
        <div class="topic-edit-box">
            <div class="comment message-edit-box message-edit-box-pro" style="position: relative;">
                <form action="" method="post">
                    <input type="hidden" name="type" th:if="${message.message_id == 0}" th:value="new" >
                    <input type="hidden" name="type" th:if="${message.message_id > 0}" th:value="edit" >
                    <input type="hidden" name="problemId" th:value="${message.problem_id}" >
                    <input type="hidden" name="moduleId" th:value="${message.module_id}" >
                    <input type="hidden" name="parentId" th:value="${message.parent_id}" >
                    <input type="hidden" name="rootId" th:value="${message.root_id}" >
                    <input type="hidden" name="messageId" th:value="${message.message_id}" >
                    <div>
                        <input class="message-title" id="message-title" name="title1" maxlength="50" th:value="${message.title}" th:placeholder="#{topic.input_title}">
                        <input class="topic_submit" type="submit" th:value="#{topic.btn_post}"></input>
                    </div>
                    <div style="padding: 0px 0px;margin: 6px 0px 12px 0px;">
                        <div class="tags-autocomplete-select">
                            <div class="tags">
                                <a id="add-tags-button" class="add-tags-button">
                                    <svg class="add-tag-icon" viewBox="0 0 24 24" fill="currentColor"><path fill-rule="evenodd" d="M13 11h7a1 1 0 110 2h-7v7a1 1 0 11-2 0v-7H4a1 1 0 110-2h7V4a1 1 0 112 0v7z" clip-rule="evenodd"></path></svg>
                                    [[#{tag}]]
                                </a>
                                <span class="add-tags-items"></span>
                            </div>
                            <input type="hidden" id="submit-tags" class="problem-tag" name="tagList" th:value="${message.tag}"/>
                            <div id="tags-autocomplete-select-menu" class="tags-autocomplete-select-menu small-scrollbar">
                                <input id="input-tags" autocomplete="off" class="input-tags" th:placeholder="#{search}"></input>
                                <div class="tags-autocomplete-select-items">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="editor-md editor-md-max" id="editor-topic-content" >
                        <textarea class="message-content ke-editor" id="edit-topic-content" name="content" rows="60" th:utext="${message.content}"></textarea>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<script type='text/javascript' th:src="@{/js/messager.js}"></script>
<script type='text/javascript' th:src='@{/js/tags.js}'></script>
<script type='text/javascript' th:src='@{/js/topic.js}'></script>
<script th:src="@{/js/editormd/editormd.min.js}"></script>
<script type='text/javascript' th:src='@{/js/editor-md.js}'></script>
</body>
</html>
